import React from 'react'
import { Table,Pagination, Card, Popconfirm,Icon} from 'antd'
import Search from './Search';
import './index.less';
/**
 * 表格组件
 * props示例 ：
 *
 * const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {

    },
    onSelect: (record, selected, selectedRows) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows);
    },
  };
 * headerProps =  {
    columns: [
      {title: 'dome', dataIndex: 'dome', key: 'dome',  className:"tableCenter",render: (text, record) => (text ? text:'' )},
      {title: '时间',  dataIndex: 'createTime',sorter:true, key: 'createTime', className:'tableCenter'}
    ],
    dataSource: []数据源,
    total: total 总数,
    nobordered:true, 是否开启边框 true 代表不开启,false代表开启
    rowSelection:rowSelection, //选择键
    expandedRowRender:(record) => <p>{record.dome}</p>,  //扩展行
    loading: loading 列表磨蹭,
    pageParam: { //  分页参数
      current: pageParam.pageNo,
      pageSize: pageParam.pageSize,
      // 一页数量回调
      onShowSizeChange: (current, pageSize) => {},
      // 翻页回调
      onChange: (current) => {},
      //排序回调 需要对应columns中, 开启sorter:true
      sortParamChange(pagination, filters, sorter) {
      },
      //搜索关键字回调
      onSearch (value) {
      }
    }
  };;
 */
//对数据源数据增加$key唯一标识,
const Guid=function (data,type) {
  return data.map(function (datas,index) {
    datas.$key=type + index;
    if(datas.children){
      Guid(datas.children,datas.$key);
    };
    return datas
  })
};
const TableView = (props) => {
  const {dataSource,columns ,total ,loading,sortParamChange,rowSelection,expandedRowRender,nobordered} = props;
  const {onSearch,onChange,onShowSizeChange,current,pageSize} =props.pageParam||{};
  const searchProps = {onSearch};
  columns.unshift({title : "序列", dataIndex : 'index', key : 'index', className:'tableCenter', render: (text, data,index) => (index+1)});

  return <Card style={{ marginTop: 5 }}>
              <div style={{height:"35px"}}>
                <div style={{display:total ? "inline-block":"none",paddingTop: "7px"}}>总共有{total?total:0}项结果</div>
                {onSearch ? <Search  {...searchProps}/>: null}
              </div>
              <div>
              <Table columns={columns}
                     dataSource={Guid(JSON.parse(JSON.stringify(dataSource))||[],"$")}
                     size="middle"
                     bordered={!nobordered}
                     rowSelection={rowSelection}
                     loading={loading ? true : false}
                     expandedRowRender={expandedRowRender}
                     rowKey={function(records,index ){return records.id||records.$key}}
                     onChange={sortParamChange}
                     pagination={false}/>
                {onChange ?
                   <Pagination
                     className="ant-table-pagination"
                     total={total}
                     current={current||0}
                     pageSize={pageSize||10}
                     showSizeChanger={onShowSizeChange ? true:false}
                     onShowSizeChange={onShowSizeChange||null}
                     onChange={onChange}/> : null}
              </div>
          </Card>
};

export default TableView
